<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<style>
			body {
				font-size: 20px;
			}
			.box1{
				width: 200px;
				height: 200px;
				background-color: #bfc;
			}
			.box2{
				width: 200px;
				height: 200px;
				background-color: orange;
			
			
			
			/*
			 绝对定位的特点：
			        1.开启绝对定位后，如果不设置偏移量，元素的位置不会发生改变
			        2.开启绝对定位后，元素会从文档流中脱离
			        3.绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开
			        4.绝对定位会使元素提升一个层级
			        5.绝对定位元素是相对于包含块进行定位的
			        
			        * 包含块（containing block）
			        *     正常情况下：
			        *         包含块就是距离当前元素最近的祖先块元素
			        *      <div></div> <div></div>
			        *  	   <div><span><em>hello</em></span></div>
			        * 
			        * 
			        * 绝对定位的包含块：
			        *    包含块就是离他最近的开启了定位的祖先元素，
			        *      如果所有的祖先元素都没有开启定位则根元素就是它的包含块
			        * 
			        *     html（分元素、初始包含块）
			        * */
				 		   position:absolute;
				 		   
				 		   left:0px;
				 		   top:0px;
			}
			.box3{
				height: 200px;
				width: 200px;
				background-color: pink;
			}
			.box4{
				height: 400px;
				width: 400px;
				background-color: skyblue;
				position:relative;
				
			}
			.box5{
				height: 300px;
				width: 300px;
				background-color: yellow;
				/*position:relative;*/
			}
		</style>
	</head>
	<body>
		<div class="box1">1</div>
		<div class="box4">4
			<div class="box5">
				5
				<div class="box2">2</div>
			</div>
		</div>
		
		<div class="box3">3</div>
	</body>
</html>
